<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="岗位类型">
						<el-select v-model="state.param.jobType" placeholder="请选择岗位类型">
							<el-option v-for="item in state.query.jobTypeList" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="岗位名称">
						<el-input v-model="state.param.keyword" placeholder="请输入岗位名称" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
						<el-button type="primary" @click="addJob('add')">
							<el-icon>
								<ele-Plus />
							</el-icon> 新 增
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData" style="width: 100%"> 
						<el-table-column label="ID" width="90" align="center">
							<template #default="scope">
								<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="岗位名称" align="center">
							<template #default="scope">
								<span>{{ scope.row.name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="岗位类型" align="center">
							<template #default="scope">
								<span>￥{{ scope.row.type }}</span>
							</template>
						</el-table-column>
						<el-table-column label="上级岗位" align="center">
							<template #default="scope">
								<span> -- </span>
							</template>
						</el-table-column>
						<el-table-column label="员工数量" align="center">
							<template #default="scope">
								<span>￥{{ scope.row.workNumber }}</span>
							</template>
						</el-table-column>
						<el-table-column label="在职员工" align="center">
							<template #default="scope">
								<span>￥{{ scope.row.employeeNumber }}</span>
							</template>
						</el-table-column>
						<el-table-column label="离职员工" align="center">
							<template #default="scope">
								<span>￥{{ scope.row.resignNumber }}</span>
							</template>
						</el-table-column>
						<el-table-column label="底薪(元)" align="center">
							<template #default="scope">
								<span> {{ scope.row.onShop ? scope.row.onNode ? '线上/门店' : '线上' : '门店' }} </span>
							</template>
						</el-table-column>
						<el-table-column label="销售提成(%)" align="center">
							<template #default="scope">
								<span> {{ scope.row.onShop ? scope.row.onNode ? '线上/门店' : '线上' : '门店' }} </span>
							</template>
						</el-table-column>
						<el-table-column label="服务手工(%)" align="center">
							<template #default="scope">
								<span> {{ scope.row.onShop ? scope.row.onNode ? '线上/门店' : '线上' : '门店' }} </span>
							</template>
						</el-table-column>
						<el-table-column label="消耗提成(%)" align="center">
							<template #default="scope">
								<span> {{ scope.row.onShop ? scope.row.onNode ? '线上/门店' : '线上' : '门店' }} </span>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="180" align="center">
							<template #default="scope">
								<el-link :underline="false" type="primary" @click="addJob('edit',scope.row.id)">编辑</el-link>&emsp;
								<el-link :underline="false" type="primary" @click="addJob('look',scope.row.id)">查看</el-link>&emsp;
								<el-link :underline="false" type="primary" @click="deleteHandle(scope.row.id,scope.$index)">删除</el-link>
							</template>
						</el-table-column>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
								:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
								v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
								:total="state.total">
							</el-pagination>
						</el-col>
					</el-row> 
				</section>
			</el-card>
		</div>
		<!-- <cardDialog ref="cardDialogRef"  @refresh="getJobList()" /> -->
		<editDialog ref="editDialogRef"  @refresh="getJobList()" />
	</div>
</template>

<script setup lang="ts" name="saleIndex">
import {  onMounted, reactive, ref ,defineAsyncComponent} from 'vue';
import { jobList } from '/@/api/personnel';
import { ElMessageBox, ElMessage, TabsPaneContext } from 'element-plus';

// 引入组件
// const cardDialog = defineAsyncComponent(() => import('/@/views/personnel/postManage/components/cardDialog.vue'));
const editDialog = defineAsyncComponent(() => import('/@/views/personnel/postManage/components/editDialog.vue'));

// const cardDialogRef = ref();
const editDialogRef = ref();
const state = reactive({
	param: {
		jobType: 1,
		keyword:'',
		pageNum: 1,
		pageSize: 10,
	},
	loading: false,
	total: 0,
	tableData: [{}],
	query: {
		jobTypeList: [
			{ value: 1, label: '全部' },
			{ value: 2, label: '总部' },
			{ value: 3, label: '门店' }
		]
	}
});

// 搜索
const search = () => {
	state.param.pageNum = 1;
	getJobList();
}

// 获取岗位列表
const getJobList = async () => {
	state.loading = true;//不用传参， 请求得入参在上面都定义了 param这里吗？
	let params = {
		type: state.param.jobType,
		keyword: state.param.keyword,
		pageNum: state.param.pageNum,
		pageSize: state.param.pageSize,
	}
	const { results } = await jobList(params);
	state.loading = false;
	state.tableData = results;
	state.total = results.total;
}

// 添加or编辑or查看岗位
const addJob = (type:string,row: any) => { 
	editDialogRef.value.openDialog(type, row, );
}

const deleteHandle = (row: any,index:number) => { 
	ElMessageBox.confirm( '确定删除该岗位吗 ?','提示',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}
	).then(() => {
		console.log(row)
		console.log(index)
    }).catch(() => {
		
    })
}

// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getJobList();
};

// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getJobList();
};

onMounted(() => {
	// 获取商品列表
	getJobList();
})
</script>
<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}
</style>